<template>
  <div class="about">
    <h1>题目列表1</h1>
    <ul v-for="(item,index) in tableData" :key="index">
      <li>
        <el-row :gutter="10" v-if="tableData>=4">
          <el-col :span="6" v-for="indexs in 4" :key="indexs">
            <div class="grid-content bg-purple" @click="options">{{item.title}}</div>
          </el-col>
        </el-row>
        <el-row :gutter="10" v-else>
          <el-col :span="8">
            <div class="grid-content bg-purple" @click="options">{{item.title}}</div>
          </el-col>
        </el-row>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    const item = [{
      title: "js动画平滑移动"
    }];
    return {
      tableData: item
    };
  },
  created(){
    // console.log("1231231231312",this.$route)
  }, 
  methods: {
    options(e) {
      console.log("=======>11232", e);
      this.$router.push('/')
    }
  },
/*   beforeRouteEnter (to, from, next) {
      console.log(to,"to0")
      console.log(from,"from")
    next(vm=>{
      console.log(to,"to0")
      console.log(from,"from")
      if(from.name==null&&vm.flag==false){
         console.log('------<<<<<<<',vm.flag,from.name)
      }else{
        console.log('------>',vm.flag,from.name)
      }
    })
  }, */
};
</script>
<style>
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
div.bg-purple:hover
{ 
background-color:blue;
color: #fff;
}
</style>